<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>某人出道倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
        }
        section {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: indigo;
            transition: 5s;
        }
        div {
            width: 915px;
            height: 68px;
            text-align: center;
            font-weight: 600;
            font-size: 50px;
            animation: djs 60s infinite;
            color: springgreen;
            cursor: pointer;
            user-select: none;
            line-height: 68px;

        }
        @keyframes djs {
            0% {
                color: white;


            }

            25% {
                color: red;


            }

            50% {
                color: violet;


            }

            75% {
                color: whitesmoke;

            }

            100% {
                color: rgb(241, 12, 50);

            }
        }
    </style>
    <script>
        window.onload = (function () {
            var djs = document.getElementById('djs');
            var gaokao =document.getElementById('gaokaodjs')
            setInterval(function () {
                var now = Date.now();
                var future = new Date(2022, 0, 31, 22, 46, 0);
                var gaokaofuture = new Date(2022, 5, 31, 8, 30, 0);
                var futureData = "2022-1-31日22:46:00"
                var futuregaokaoData = "2022-6-31日8:30:00"
                var times = future - now;
                var gaokaotimes = gaokaofuture - now;
                var s = times / 1000;
                var s_gaokao = gaokaotimes / 1000;
                var day = Math.floor(s / (60 * 60 * 24));
                var gaokaoday = Math.floor(s_gaokao / (60 * 60 * 24));
                var hours = Math.floor(s % 86400 / 3600);
                var gaokoahours = Math.floor(s_gaokao % 86400 / 3600);
                var min = Math.floor(s % 3600 / 60);
                var gaokaomin = Math.floor(s_gaokao % 3600 / 60);
                var sec = Math.floor(s % 60);
                var gaokaosec = Math.floor(s_gaokao % 60);
                djs.innerHTML = `距离lp出道还剩${day}天${hours}时${min}分${sec}秒<br>${futureData}`;
                gaokaodjs.innerHTML = `距离Bamboo drag高考还剩${gaokaoday}天${gaokoahours}时${gaokaomin}分${gaokaosec}秒<br>${futuregaokaoData}`;
            }, 1000);
        })
    </script>
</head>
<body>
    <section>
        <div id="djs"></div>
        <div id="gaokaodjs"></div>
    </section>

</body>

</html>